<template>
  <div class="wrap">
    <div class="box_top">
      <div class="title">
        <div class="T_l">系统排名</div>
        <div class="T_r">全部排名</div>
      </div>
      <div class="swipe">
        <van-swipe @change="onChange" :loop="false" :width="175" :height="160">
          <van-swipe-item>
            <div class="box_one">
              <div class="title_top">移动工作平台</div>
              <div class="center">
                <span>88</span>
                分
              </div>
              <div class="bottom">
                <div class="b_l">
                  <div class="T">80%</div>
                  <div class="B">超过全行系统</div>
                </div>
                <div class="b_r">
                  NO.
                  <span>1</span>
                </div>
              </div>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="box">
              <div class="title_top">移动工作平台</div>
              <div class="center">
                <span>88</span>
                分
              </div>
              <div class="bottom">
                <div class="b_l">
                  <div class="T">80%</div>
                  <div class="B">超过全行系统</div>
                </div>
                <div class="b_r">
                  NO.
                  <span>1</span>
                </div>
              </div>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="box">
              <div class="title_top">移动工作平台</div>
              <div class="center">
                <span>88</span>
                分
              </div>
              <div class="bottom">
                <div class="b_l">
                  <div class="T">80%</div>
                  <div class="B">超过全行系统</div>
                </div>
                <div class="b_r">
                  NO.
                  <span>1</span>
                </div>
              </div>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="box">
              <div class="title_top">移动工作平台</div>
              <div class="center">
                <span>88</span>
                分
              </div>
              <div class="bottom">
                <div class="b_l">
                  <div class="T">80%</div>
                  <div class="B">超过全行系统</div>
                </div>
                <div class="b_r">
                  NO.
                  <span>1</span>
                </div>
              </div>
            </div>
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">
              <span>{{ current + 1 }}</span>/4
            </div>
          </template>
        </van-swipe>
      </div>
    </div>
    <div class="box_B">
      <div class="t_H">
        <span>排名规则</span>
      </div>
      <div class="text">
        交电话费电话费看了就恢复客家话客家话是了还是的看法和肯定会发卡号发好看了就火箭的实力客服核实客户反馈是开放的接口立刻决定是否考虑即使分开了军事科技孵化
        的法律框架ADSL看法兰克福流口水的饭卡上考虑房间里萨克地方螺丝钉解放了骄傲了立刻搭街坊立刻就阿达连连看
      </div>
    </div>
    <div class="img"></div>
  </div>
</template>

<script>
// import addButton from '../components/add-button'
import iPhoneXBottomSetAside from "../../mixins/iphoneXBottomAside.js";
// import { mapState, mapMutations, mapActions } from 'vuex'
// 接口
import {} from "@/core/api/index";
import GLOBAL from "@/components/global_variable";
import Vue from "vue";
import { NoticeBar, Cell, Swipe, SwipeItem } from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(NoticeBar);
Vue.use(Cell);
export default {
  data() {
    return {
      current: 0,
    };
  },
  created() {
    // minxing接口的方法
    document.addEventListener("deviceready", onDeviceReady, false); // 等待cordova加载
    let that = this;
    function onDeviceReady() {
      MXCommon.getCurrentUser(function (result) {
        console.log(result, "当前登录账号信息");
        GLOBAL.userId = result.login_name;
        GLOBAL.userName = result.name;
        // setTimeout(() => {

        // }, 10);
      });
    }
  },
  mixins: [iPhoneXBottomSetAside],
  methods: {
    // 轮播图
    onChange(index) {
      this.current = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;
  background: url("../../assets/img1/10全部排行榜@2x.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.box_top {
  width: 100%;
  height: 550px;
  background: #ffffff;
  border-radius: 0px 0px 30px 70px;
  box-sizing: border-box;
  padding: 40px 0 0 20px;
  .title {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 20px;
    .T_l {
      height: 100%;
      min-width: 200px;
      background: url("../../assets/img1/排名标题背景@2x.png") no-repeat;
      background-size: 100% 100%;
      font-family: SourceHanSansCN-Medium;
      font-size: 36px;
      color: #313754;
      letter-spacing: 0;
      text-align: center;
      line-height: 130px;
    }
    .T_r {
      width: 120px;
      height: 50px;
      background: #5d2ed7;
      border-radius: 100px 0 0 100px;
      font-family: SourceHanSansCN-Medium;
      font-size: 26px;
      color: #ffffff;
      text-align: center;
      line-height: 50px;
    }
  }
  .swipe {
    width: 100%;
    height: 350px;
    .van-swipe-item {
      font-size: 20px;
    }
    .custom-indicator {
      width: 50px;
      margin: 0 auto;
      font-family: STHeitiSC-Light;
      font-size: 30px;
      color: #000000;
      line-height: 31px;
      padding: 20px 0px;
      span {
        color: #313754;
      }
    }
    .box {
      width: 100%;
      height: 100%;
      background: url("../../assets/img1/椭圆形@2x.png") no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 20px;
      display: flex;
      flex-flow: column; //垂直排列
      justify-content: space-between; //两端对齐

      .title_top {
        font-family: SourceHanSansCN-Medium;
        font-size: 28px;
        color: #313754;
      }
      .center {
        font-family: SourceHanSansCN-Normal;
        font-size: 24px;
        span {
          font-family: JCHEadA;
          font-size: 90px;
          color: #313754;
          letter-spacing: 0;
          text-align: left;
        }
      }
      .bottom {
        width: 100%;
        height: 100px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        // box-sizing: border-box;
        // margin-bottom: 20px;
        .b_l {
          .T {
            font-family: SourceHanSansCN-Heavy;
            font-size: 34px;
            color: #a1a8ca;
          }
          .B {
            font-family: SourceHanSansCN-Normal;
            font-size: 24px;
            color: #dcdcdc;
          }
        }
        .b_r {
          font-size: 30px;
          color: rgba($color: #727d9e, $alpha: 0.32);
          line-height: 100px;
          text-align: center;

          span {
            color: #727d9e;
            font-family: Impact;
            font-size: 57px;
          }
        }
      }
    }
    .box_one {
      width: 100%;
      height: 100%;
      background: url("../../assets/img1/第一名背景色块@2x.png") no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 20px;
      display: flex;
      flex-flow: column; //垂直排列
      justify-content: space-between; //两端对齐

      .title_top {
        font-family: SourceHanSansCN-Medium;
        font-size: 28px;
        color: #ffffff;
      }
      .center {
        font-family: SourceHanSansCN-Normal;
        font-size: 24px;
        color: #fff;
        span {
          font-family: JCHEadA;
          font-size: 90px;
          color: #ffffff;
          letter-spacing: 0;
          text-align: left;
        }
      }
      .bottom {
        width: 100%;
        height: 100px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        // box-sizing: border-box;
        // margin-bottom: 20px;
        .b_l {
          .T {
            font-family: SourceHanSansCN-Heavy;
            font-size: 34px;
            color: #dcdcdc;
          }
          .B {
            font-family: SourceHanSansCN-Normal;
            font-size: 24px;
            color: #dcdcdc;
          }
        }
        .b_r {
          font-size: 30px;
          color: rgba($color: #5d2ed7, $alpha: 0.32);
          line-height: 100px;
          text-align: center;

          span {
            color: rgba($color: #5d2ed7, $alpha: 1);
            font-family: Impact;
            font-size: 57px;
          }
        }
      }
    }
  }
}
.box_B {
  width: 100%;
  min-height: 500px;
  box-sizing: border-box;
  padding: 50px 40px;
  .t_H {
    font-family: PingFangSC-Semibold;
    font-size: 30px;
    color: #ffffff;
    letter-spacing: 0;
    width: 125px;
    height: 20px;
    background: #8151ff;
    position: relative;
    span {
      position: absolute;
      top: -20px;
    }
  }
  .text {
    width: 100%;
    opacity: 0.7;
    font-family: SourceHanSansCN-Normal;
    font-size: 28px;
    color: #ffffff;
    text-align: justify;
    margin-top: 20px;
  }
}
.img {
  width: 100%;
  height: 50px;
  background: url("../../assets/img1/9个人相关排行榜@2x.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: 0;
}
</style>
